<template>
    <div>
      <Form ref="eleForm" :model="fig" :rules="rules" style="text-align:left;line-height: normal;"
        label-position="top">
        <Divider style="margin-top:0">字段配置</Divider>
        <FormItem prop="field" label="绑定字段" style="line-height: normal;">
          <div>
            <Input v-model="fig.field" placeholder="请填写字段名"/>
          </div>
          <div class="tips" style="line-height: normal;margin-top:10px">绑定字段代表数据库存储的字段以及表格显示的字段</div>
        </FormItem>
        <FormItem label="字段别名" style="line-height: normal;">
          <div>
            <Input v-model="fig.tableLabel" placeholder="请填写字段别名"/>
          </div>
          <div class="tips" style="line-height: normal;margin-top:10px">字段别名表示该字段在表格或其他地方的展示名称</div>
        </FormItem>
        <FormItem label="默认值" style="line-height: normal;">
          <Input v-for="(item, i) in fig.default" :key="i" :value="item" readonly style="width:100%;margin-bottom:5px"/>
          <div class="tips" style="line-height: normal;margin-top:10px">请在下方添加选项后在右侧组件选择</div>
        </FormItem>
        <Divider>组件属性</Divider>
        <FormItem label="标签" style="line-height: normal;">
          <div>
            <Input v-model="fig.label" placeholder="请填写字段标签"/>
          </div>
        </FormItem>
        <FormItem label="组件大小" style="line-height: normal;">
          <div>
            <Select v-model="fig.attr.size">
              <Option value="default">默认</Option>
              <Option value="large">大尺寸</Option>
              <Option value="small">小尺寸</Option>
            </Select>
          </div>
        </FormItem>
        <div style="display:flex;justify-content: space-between;">
          <div>
            <FormItem label="是否隐藏" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.hide"/>
              </div>
            </FormItem>
          </div>
          <div>
            <FormItem label="显示边框" style="line-height: normal;">
              <div>
                <SwitchIview v-model="fig.attr.border"/>
              </div>
            </FormItem>
          </div>
        </div>
        <Divider>组件选项</Divider>
        <div style="margin-bottom:10px;display:flex" v-for="(item, i) in fig.option" :key="i">
            <Input v-model="item.label" placeholder="选项"/>
            <Input v-model="item.value" placeholder="选项值" style="margin:0 5px"/>
            <Button @click="delOption(i)">
                <Icon type="md-close"/>
            </Button>
        </div>
        <Button @click="addOption" long>新增选项</Button>
      </Form>
    </div>
</template>

<script>
export default {
  name: 'CheckboxAttr',
  props: {
    config: {
      type: Object,
      default: undefined
    }
  },
  watch: {
    'config': {
      handler: function (e) {
        this.fig = e
      }
    }
  },
  methods: {
    addOption () {
      this.fig.option.push(
        this.lseutil.objCopy({
          label: '',
          value: ''
        })
      )
    },
    delOption (i) {
      this.fig.option.splice(i, 1)
    },
    checkType (val) {
      return typeof (val)
    }
  },
  data () {
    return {
      fig: this.config,
      rules: {
        field: [
          { required: true, message: '请填写字段名', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>
